<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="zh"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="zh"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="zh"> <![endif]-->
<!--[if gt IE 8]><!--> 
<html class="no-js" lang="zh"  xmlns:th="http://www.thymeleaf.org"> 
<!--<![endif]-->
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title th:text="#{index.petncs}">宠联网客服</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./layui/css/layui.css">
<link rel="stylesheet"	href="./css/customer.css">
<link rel="stylesheet" type="text/css" href="./userchat/font_Icon/iconfont.css">
<style type="text/css">
 	.chat-body{
		position: absolute;
		background-color: red;
		top: 80px;
		left: 200px;
	    right: 0;
	    bottom: 44px;
	    z-index: 998;
	    width: auto;
	    overflow: hidden;
	    box-sizing: border-box;
	}
	.user-info-box{
		background-color: #83af9b;
		float:left;
		width: 30%;
		height: 100%;
		overflow-y:hidden; 
	}
	.chat-box{
		background-color: gray;
		float:left;
		width: 70%;
		height: 100%;
		bottom:0;
	}
	/* .title{
		height: 10%;
	    border-bottom: none;
	    background-color: #F8F8F8;
	    background-color: rgba(245,245,245,.7);
	        padding: 0 80px 0 20px;
	    line-height: 10%;
	    border-bottom: 1px solid #eee;
	    font-size: 14px;
	    color: #333;
	    overflow: hidden;
	    background-color: #F8F8F8;
	    border-radius: 2px 2px 0 0;
	} */
	.im-chat-box{
		height: 100%;
		background-color: red;
		box-sizing: content-box;
	}
	.chat-show{
		height: 90%;
		background-color: buttonface;
	}
	.chat-main{
		height: 75%;
		overflow-y:auto;
		/* background-color: lime; */
	}
	.chat-footer{
		position:relative;
		width:100%;
		height: 38%;
		background-color: white; 
	}
	.qqFace{
		position: absolute;
		top:-120px;
	}
	.qqFace td{
		cursor: pointer;
	}
	.chat-tool{
		/*height: 20%;*/
	}
	.chat-textarea{
		height: 88%;
		width:98%;
	    line-height: 100%;
	    padding: 0px 10px;
	    resize: vertical;
	}
	textarea{
		
		width:100%;
		height: auto;
	    line-height: 20px;
	    padding: 6px 10px;
	    resize: vertical;
	}
	.chat-bottom{
		width:100%;
		margin-left: 20px;
		margin-bottom: 0;
	}
	.sub{
		top: 10%;
		left: 10%;
		width:100%;
		height: 60%;
	}
	.chat-send{
		
		width: 92px;
		height: 38px;
		bottom:0;
		float: right;
		margin-right: 85px;
		
	}
	#send{
		height:32px;
		line-height:32px;
		margin-top:13px;
	}
	
	.layim-chat-main ul .layim-chat-mine{text-align: right; padding-left: 0; padding-right: 60px;}
	.layim-chat-main ul li{position: relative; font-size: 0; margin-bottom: 10px; padding-left: 60px; min-height: 68px;}
	.layim-chat-mine .layim-chat-user cite{
	left: auto;
    right: 60px;
    text-align: right;
	    position: absolute;
	    top: -2px;
	    width: 500px;
	    line-height: 24px;
	    font-size: 12px;
	    white-space: nowrap;
	    color: #999;
	    font-style: normal;
	}
	.layim-chat-mine .layim-chat-text{
    background-color: #5FB666;
    position: relative;
    line-height: 22px;
    margin-top: 25px;
    padding: 8px;
    border-radius: 3px;
    word-break: break-all;
        display: inline-block;
    vertical-align: top;
    font-size: 14px;
    max-width: 62%;
     text-align: left;
	}
	.layim-chat-user{
		position: absolute;
		left: auto;
    	right: 3px;
	}
	.layim-chat-mine .layim-chat-text img{
		max-width: 250px;
	}
	.layim-chat-user img{
		width: 40px;
	    height: 40px;
	    border-radius: 100%;
	}
	img{
		border: none;
		vertical-align: middle;
	}
	.layim-chat-mine .layim-chat-text:after{
		left: auto;
	    right: -10px;
	    border-top-color: #5FB878;
	}
	.layim-chat-text:after{
		content: '';
	    position: absolute;
	    left: -10px;
	    top: 13px;
	    width: 0;
	    height: 0;
	    border-style: dashed;
	    border-color: transparent;
	    overflow: hidden;
	    border-width: 10px;
	    border-top-style: solid;
	    border-top-color: #e2e2e2;
	}
	.layim-chat-mine .layim-chat-user cite i{
		padding-left: 0;
    	padding-right: 15px;
    	font-style: normal;
	}
	.layui-btn{
		background-color:#5FB878;
	}
	.layim-chat-user{
		    position: absolute;
		    left: 3px;
		    display: inline-block;
		    vertical-align: top;
		    font-size: 14px;
	}
	.layim-chat-user-text{
		position: relative;
	    line-height: 22px;
	    margin-top: 25px;
	    padding: 8px;
	    padding-top: 8px;
	    padding-right: 8px;
	    padding-bottom: 8px;
	    padding-left: 8px;
	    background-color: #2F4056;
	    border-radius: 3px;
	    border-top-left-radius: 3px;
	    border-top-right-radius: 3px;
	    border-bottom-right-radius: 3px;
	    border-bottom-left-radius: 3px;
	    display: inline-block;
	    vertical-align: top;
	    font-size: 14px;
	    color: #fff;
	    word-break: break-all;
	    max-width: 62%;
	}
	.layim-chat-user-text img{
		max-width:250px;
	}
	.layim-chat-user-cite{
		position: absolute;
	    left: 60px;
	    top: -2px;
	    width: 500px;
	    line-height: 24px;
	    font-size: 12px;
	    white-space: nowrap;
	    color: #999;
	    text-align: left;
	    font-style: normal;
	}
	.layim-chat-user-cite i{
		padding-left: 15px;
    	font-style: normal;
	}
	.layim-chat-user-text:after{
		content: '';
	    position: absolute;
	    left: -10px;
	    top: 13px;
	    width: 0;
	    height: 0;
	    border-style: dashed;
	    border-top-style: solid;
	    border-right-style: dashed;
	    border-bottom-style: dashed;
	    border-left-style: dashed;
	    border-color: transparent;
	    border-top-color: #2F4056;
	    border-right-color: transparent;
	    border-bottom-color: transparent;
	    border-left-color: transparent;
	    overflow: hidden;
	    overflow-x: hidden;
	    overflow-y: hidden;
	    border-width: 10px;
	    border-top-width: 10px;
	    border-right-width: 10px;
	    border-bottom-width: 10px;
	    border-left-width: 10px;
	    border-top-style: solid;
	    border-top-color: #2F4056;
	}
	.chat-textarea textarea{
		display: block;
	    width: 100%;
    padding:0px;
	    height: 100%;
	    line-height: 20px;
	    border: none;
	    overflow: auto;
	    overflow-x: auto;
    overflow-y: auto;
	    resize: none;
	    background: none;
	    background-image: none;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
	    border-top-color: initial;
    border-top-style: none;
    border-top-width: initial;
    border-right-color: initial;
    border-right-style: none;
    border-right-width: initial;
    border-bottom-color: initial;
    border-bottom-style: none;
    border-bottom-width: initial;
    border-left-color: initial;
    border-left-style: none;
    border-left-width: initial;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
	}
	.layim-chat-tool span{
		position: relative;
	    margin: 0 10px;
	    margin-top: 0px;
	    margin-right: 10px;
	    margin-bottom: 0px;
	    margin-left: 10px;
	    display: inline-block;
	    vertical-align: top;
	    font-size: 24px;
	    cursor: pointer;
	}
	.layui-icon{
		font-family: layui-icon!important;
	    font-size: 16px;
	    font-style: normal;
	    -webkit-font-smoothing: antialiased;
	}
</style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin layui-bg-cyan">
  <div class="layui-header layui-bg-cyan">
    <div class="layui-logo"><img th:alt="#{index.petncso}" src="/layui/images/img/logo-index.png"	style="height: 80px;width: 200px"></div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <!-- <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href=""><label th:text="#{welcome}"></a></li>
      <li class="layui-nav-item"><a href="">客服管理</a></li>
      
    </ul> -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item"	id="myInfo">
        <!-- <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl> -->
      </li>
      <li class="layui-nav-item"	id="state-info">
      
      <a href="http://localhost/" th:text="#{index.return}">退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-cyan">
    <div class="layui-side-scroll layui-bg-cyan">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;" th:text="#{index.pendingaccess}">待接入</a>
          <dl class="layui-nav-child"	id="djr">
            <!-- <dd><a href="/chat/room">用户1</a></dd>
            <dd><a href="javascript:;"	onclick="">列表二</a></dd>
            <dd><a href="javascript:;">列表三</a></dd>
            <dd><a href="">超链接</a></dd> -->
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;" th:text="#{index.onlineuser}">在线用户</a>
          <dl class="layui-nav-child"	id="userOnline">
          
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;" th:text="#{index.receiving}">正在接待</a>
          <dl class="layui-nav-child"	id="Receiving">
          
          </dl>
        </li>
        <li class="layui-nav-item">
	        <a href="javascript:;" th:text="#{index.transfercs}">转接客服</a>
		        <dl class="layui-nav-child"	id="zhuanjie">
		        </dl>
	      </li>
      </ul>
    </div>
  </div>
  
  <div class="chat-body">
    <!-- 左侧显示用户信息和相关设备信息 -->
    <div	class="user-info-box">
    	<div	class="user">
	    	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			  <legend th:text="#{index.userinfo}">用户信息</legend>
			</fieldset>
			<div class="layui-collapse" lay-filter="test" id="user">
			
			</div>
    	</div>
    	
    	<div	class="pet">
    	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		  <legend th:text="#{index.userpetlist}">用户宠物列表</legend>
		</fieldset>
		<div class="layui-collapse" lay-filter="test" id="pet">
		
		</div>
    	</div>
    	<div	class="device">
    	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		  <legend th:text="#{index.userdevicelist}">用户设备列表</legend>
		</fieldset>
		<div class="layui-collapse" lay-filter="test" id="device">
		
		</div>
    	</div>
    </div>
    <!-- 右侧显示聊天框 -->
    <div	class="chat-box">
    	<!-- <div	class="title">
    	
    	</div> -->
    	<div	class="content"></div>
    	<div	class="im-chat-box">
    		<div	class="chat-show">
    			<div	class="chat-main">
    			<div	class="show-sk">
                	<div class="sk-three-bounce">
			        	
			      	</div>
                </div>
    			<div	class="layim-chat-main"	id="printMsg">
    				<ul>
    					<!-- 用户的输出语句 -->
						<!-- <li>
							<div class="layim-chat-user"> <img src="/layui/images/img/tu2.png"> <cite class="layim-chat-user-cite">tml <i>2018-07-13 18:00:37</i> </cite> </div>
							<div class="layim-chat-user-text">zkolp</div>
						</li> -->
						<!-- 我的输出语句 -->
						<!-- <li class="layim-chat-mine">
							<div class="layim-chat-user"> <img src="/layui/images/img/tu2.png"> <cite><i>2018-07-12 21:45:11</i>707</cite> </div>
							<div class="layim-chat-text">ssss</div>
						</li> -->
						
					</ul>
    			</div>
    			</div>
    			
    			<div	class="chat-footer">
    				<div	class="qqFace">	</div>
    				<div class="layui-unselect layim-chat-tool chat-tool" style="padding: 5px 0px"	 data-json="%7B%22name%22%3A%22tml%22%2C%22type%22%3A%22friend%22%2C%22avatar%22%3A%22%2Flayui%2Fimages%2Fimg%2Ftu2.png%22%2C%22id%22%3A1%7D">
    				
                            <span  id="chat-biaoqing" class="layui-icon layim-tool-face" th:title="#{index.selectexpression}" style="color:#5FB666;font-weight:bold;" ></span>
                        
    				<label id="chat-tuxiang" th:title="#{index.sendpictures}" for="inputImage" class="btn-default-styles">
                            <input type="file" onchange="selectImg(this)" accept="image/jpg,image/jpeg,image/png"
                                   name="file" id="inputImage" class="hidden"	hidden="true"	width="24px" height="38px">
                            <span class="layui-icon layim-tool-image" th:title="#{index.uploadimage}"  style="color:#5FB666;font-weight:bold;" >
    				</span>
                        </label>
    				
    				</div>
    				<div	class="sub">
    					<div	class="chat-textarea">
	    					<textarea	id="messages" name="saytext"></textarea>
	    				</div>
	    				<div	class="chat-bottom">
	    					<div	class="chat-send">
	    						<button class="layui-btn layui-btn-fluid " th:text="#{index.send}"	id="send">发送</button>
	    					</div>
	    				</div>
    				</div>
    				
    			</div>
    		</div>
    	</div>
    </div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    ©2018-04-17 www.dognessnetwork.com Inc.All rights reserved 粤ICP备18041770号-1.  网站建设：广东多尼斯网络科技有限公司
  </div>
</div>
<script src="./layui/jquery-2.1.4.js"></script>
<script src="./js/base64.js"></script>
<script src="./layui/layui.js"></script>
<script src="./js/customer.js"></script>
<script src="./js/user_device.js"></script>
<script src="./userchat/js/jquery.qqFace.js"></script>
<!-- <script src="./webjars/sockjs-client/1.1.2/sockjs.min.js"></script>
<script src="./webjars/stomp-websocket/2.3.3/stomp.min.js"></script> -->
<script>

	/* JavaScript代码区域 */
	layui.use('element', function() {
		var element = layui.element;
	});
	/* $(".chat-body").fadeToggle(); */
	function GetRequest() {  
	   var url = location.search; //获取url中"?"符后的字串  
	   var theRequest = new Object();  
	   if (url.indexOf("?") != -1) {  
	      var str = url.substr(1); 
	      strs = str.split("&");  
	      for(var i = 0; i < strs.length; i ++) {  
	         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
	      }  
	   }  
	   return theRequest;  
	}
	/* 获取当前用户基本信息 */
	var petUser;
	var room;
	var seat;
	var message;
	var tousername;
	var photoUrl;
	var CSD;
	var PFU;
	var	lang;

	var websocket;
	$(function() {
		console.log(GetRequest());
		get_customer();

		if ('WebSocket' in window) {
			websocket = new WebSocket(getWeSocket() + "/" + lang + "/" + seat);
			//new WebSocket(getWeSocket() + "2/"/* "?userId=" */ + seat);
		} else if ('MozWebSocket' in window) {
			websocket = new MozWebSocket(getWeSocket() + seat);
		} else {
			websocket = new SockJS(getSockJS() + seat);
		}
		websocket.onopen = function()
        {
            //webSocket.send( document.getElementById('username').value+"已经上线了");
            console.log("已经连通了websocket");
        };
		websocket.onmessage = function(event) {
			var data = JSON.parse(event.data);
			console.log(data);
			switch(data.header.code)
			{
			case 1:
				console.log("上线");
				var mycars = new Array(data.data);

				for (var i = 0; i < mycars.length; i++) {

					if ($.inArray(mycars[i], PFU) == (-1)) {

						var result = '<dd class="'+mycars[i]+'"><a href="#"	onclick="jr(this.id)"	id="'
								+ mycars[i]
								+ '">'
								+ mycars[i].substring(3)
								+ '</a></dd>';
						$("#userOnline").html(result);
					}

				}
			  break;
			case 2:
				console.log("下线");
			  break;
			case 3:
				console.log("在线名单");
				CSD = data.data.CSD;
				var CSDlen = CSD.length;
				PFU = data.data.PFU;
				var PFUlen = PFU.length;

				if (CSDlen > 0) {

					console.log("获取到的在线客服列表");
					console.log(data.data.CSD);

					for (var i = 0; i < CSDlen; i++) {
						get_can_get_time(CSD[i].substring(3));
					}

				}

				if (PFUlen > 0) {
					console.log("获取到的在线用户列表");
					console.log(data.data.PFU);
					for (var i = 0; i < PFUlen; i++) {

						var result = '<dd class="'+PFU[i]+'"><a href="#"	onclick="jr(this.id)"	id="'
								+ PFU[i]
								+ '">'
								+ PFU[i].substring(3)
								+ '</a></dd>';
						$("#userOnline").append(result);
					}
				} else {
					/* 没有请求用户的情况 */
					console.log("无用户");
				}
				break;
			case 4:
				saveMessage(data.data);
				console.log("普通消息");
				if (data.data.msgType == 'Picture') {
					getImage(data.data);
				}
				if (data.data.msgType == 'Text') {

					var fromUser = data.data.fromUser;
					console.log(fromUser.substring(0,8));
					if (data.data.content == '人工') {
						$("#djr").append($('#' + fromUser.substring(0,8)).clone());
						$('.' + fromUser.substring(0,8)).detach();
					} else if (data.data.content.substring(0, 8) == 'Transfer') {
						alertTransfer(data.data.content.substring(9));
					} else if (data.data.content.substring(0, 10) == 'DenyAccess') {

						alertDenyAccess(data.data.content.substring(11));
					} else {
						getMessage(data.data);
					}
				}
				break;
			case 5:
				console.log(5);
				var fromUser = data.data.fromUser;
				$("#djr").append($('#' + fromUser).clone());
				$('.' + fromUser).detach();
				break;
			case 6:
				console.log(data);
				petUser = data.data.toUser;
				var customer = data.data.fromUser;
				var sendTime = data.data.sendTime;
				var avatar = data.data.avatar;
				var content = data.data.content;

				$('#printMsg ul').empty();
				refresh();
				if (data.header.code == 6) {
					room = customer;
					get_login_user();
					PETUSER = data;
					get_all_device();
					get_all_pet();

					/* $('#PFU'+petUser).detach(); */
					var result = '<dd class="'+petUser.substring(3)+'"><a href="#"	onclick="switchUser(this.id)"	id="'
							+ petUser.substring(3) + '">' + petUser.substring(3) + '</a></dd>';
					$("#Receiving").html(result);

					var mineMsg = '<li class="layim-chat-mine">'
							+ '<div class="layim-chat-user"> <img src="'
							+	avatar
							+	'"><cite><i>'
							+ format(sendTime)
							+ '</i>'
							+ customer
							+ '</cite> </div><div class="layim-chat-text">'
							+ content + '</div>' + '</li>';
					$("#printMsg ul").append(mineMsg);

				} else {
					var content = "[[#{index.accessfailure}]]";
					alertInfo(content);
				}
				break;
			}
			/* 6000列出所有用户 */
			if (data.header.code == 6000) {
				CSD = data.data.CSD;
				var CSDlen = CSD.length;
				PFU = data.data.PFU;
				var PFUlen = PFU.length;

				if (CSDlen > 0) {

					console.log("获取到的在线客服列表");
					console.log(data.data.CSD);

					for (var i = 0; i < CSDlen; i++) {
						get_can_get_time(CSD[i].substring(3));
					}

				}

				if (PFUlen > 0) {
					console.log("获取到的在线用户列表");
					console.log(data.data.PFU);
					for (var i = 0; i < PFUlen; i++) {

						var result = '<dd class="'+PFU[i]+'"><a href="#"	onclick="jr(this.id)"	id="'
								+ PFU[i]
								+ '">'
								+ PFU[i].substring(3)
								+ '</a></dd>';
						$("#userOnline").append(result);
					}
				} else {
					/* 没有请求用户的情况 */
					console.log("无用户");
				}
			}
			/* 6002添加上线用户到列表 */
			if (data.header.code == 6002) {
				var mycars = new Array(data.data);

				for (var i = 0; i < mycars.length; i++) {

					if ($.inArray(mycars[i], PFU) == (-1)) {

						var result = '<dd class="'+mycars[i]+'"><a href="#"	onclick="jr(this.id)"	id="'
								+ mycars[i]
								+ '">'
								+ mycars[i].substring(3)
								+ '</a></dd>';
						$("#userOnline").html(result);
					}

				}
			}
			/* 6003下线 */
			if (data.header.code == 6003) {
				console.log(data.data);
			}
			/* 6666消息通道 */
			if (data.header.code == 6666) {
				if (data.data.msgType == 'Picture') {
					getImage(data.data);
				}
				if (data.data.msgType == 'Text') {

					var fromUser = data.data.fromUser;
					if (data.data.content == '人工') {
						$("#djr").append($('#' + fromUser).clone());
						$('.' + fromUser).detach();
					} else if (data.data.content.substring(0, 8) == 'Transfer') {
						alertTransfer(data.data.content.substring(9));
					} else if (data.data.content.substring(0, 10) == 'DenyAccess') {

						alertDenyAccess(data.data.content.substring(11));
					} else {
						getMessage(data.data);
					}
				}
			}
		};
	});
	/* 判断是否接入 */
	/* function get_petUser_is_accessing(e) {
		console.log("是否接入");
		console.log(e);
		$
				.ajax({
					type : "POST",
					async : false,
					url : "/js/chatrooms/get_petUser_is_accessing",
					data : {
						array : e
					},
					dataType : "json",
					success : function(data) {
						/* 获取到正在请求的用户 */
						/* console.log(data);
						for (var i = 0; i < data.length; i++) {

							var result = '<dd class="PFU'+data[i]+'"><a href="#"	onclick="jr(this.id)"	id="PFU'
									+ data[i] + '">' + data[i] + '</a></dd>';
							$("#userOnline").append(result);
						}

					},
					error : function() {
					},
				});
	} */ 

	/* 接入操作 */
	function jr(id) {
		console.log("用户ID>>>");
		console.log(seat+id);
		tousername = id;
		var message = {
	            "petUser":id,
	            "seat":seat,
	            "content":'接入用户'
	        };
		websocket.send(JSON.stringify(message));
		/* 接入用户，查询用户信息 */
		/* $.ajax({
					type : "POST",
					async : false,
					//url : "/js/chatrooms/customer_access",
					data : {
						petUser : id,
						seat : seat
					},
					dataType : "json",
					success : function(data) {
						console.log(data);
						petUser = data.res.toUser;
						var customer = data.res.formUser;
						var sendTime = data.res.sendTime;
						var avatar = data.res.avatar;
						var content = data.res.content;

						$('#printMsg ul').empty();
						refresh();
						if (data.code == 0) {
							room = customer;
							get_login_user();
							PETUSER = data;
							get_all_device();
							get_all_pet(); */

							/* $('#PFU'+petUser).detach(); */
							/* var result = '<dd class="'+petUser+'"><a href="#"	onclick="switchUser(this.id)"	id="'
									+ petUser + '">' + petUser + '</a></dd>';
							$("#Receiving").html(result);

							var mineMsg = '<li class="layim-chat-mine">'
									+ '<div class="layim-chat-user"> <img src="'
									+	avatar
									+	'"><cite><i>'
									+ format(sendTime)
									+ '</i>'
									+ customer
									+ '</cite> </div><div class="layim-chat-text">'
									+ content + '</div>' + '</li>';
							$("#printMsg ul").append(mineMsg);

						} else {
							var content = "接入失败";
							alertInfo(content);
						}

					},
					error : function() {
						alert('eoo')
					},
				}); */
		/* $(".chat-body").fadeToggle(1); */

	}
	$(function() {
		$('#chat-biaoqing').qqFace({
			id : 'facebox',
			assign : 'messages',
			path : './userchat/img/arclist/' /* 表情存放的路径"src/main/resources/static" */
		});
	});
	function showQQFace() {
	}/* 删除会报错 */
	/* 查看结果 */
	function replace_em(str) {
		str = str.replace(/\</g, '&lt;');
		str = str.replace(/\>/g, '&gt;');
		str = str.replace(/\n/g, '<br/>');
		str = str
				.replace(
						/\[em_([0-9]*)\]/g,
						'<img	style="width: 24px;height: 24px;" src="./userchat/img/arclist/$1.gif" border="0" />');
		return str;
	}
	function send() {
		console.log("发送数据：");
		console.log(seat, tousername);
		/* console.log(message) */
		message = $("#messages").val();
		var messages = replace_em(message);
		console.log(messages);
		if (message.length == 0) {
			var content = "[[#{index.notempty}]]";
			alertInfo(content);
			
		} else {
			
			websocket.send(
					JSON.stringify(
							getMessageStructure(seat,tousername,"Text",messages,seat)
							));
			/* 清空输入框拼接 */
			$("#messages").val("");
			/* printMessage(messages) */
			printFormUserMessage(messages,
					getNowFormatDate(), seat);
			
		}
		new_news();
	}
	//构造消息体
	function	getMessageStructure(fromUser,toUser,msgType,content,userName) {
		var message = {
                "fromUser":fromUser,
                "toUser":toUser,
                "msgType":msgType,
                "content":content,
                "userName":userName
            };
		return	message;
	}
	function getMessage(json) {
		printUserMessage(json);
	}
	function getImage(data) {
		var path = data.content;

		var image = '<li>'
				+ '<div class="layim-chat-user"> <img src="'
					+	photoUrl
					+	'"> <cite class="layim-chat-user-cite">'+data.fromUser+' <i>'
				+ format(getNowFormatDate())
				+ '</i> </cite> </div>'
				+ '<div class="layim-chat-user-text"><img src="'
					+	path
					+	'"></div></li>';
		$("#printMsg ul").append(image);
	}
	$("#send").click(function() {
		send();
	})
	/* enter事件 */
	$(window).keydown(function(event) {
		if (event.keyCode == 13) {
			if (event.ctrlKey) {
				document.getElementById("messages").value += '\r\n';
				/* alert("ctrl+enter换行！") */
			} else {
				send();
				event.cancelBubble = true;
				event.preventDefault();
				event.stopPropagation();
			}
		}
	});

	function printMessage(message) {
		var mineMsg = '<li class="layim-chat-mine">'
				+ '<div class="layim-chat-user"> <img src="/layui/images/img/tu2.png">'
				+ '<cite><i>' + getNowFormatDate() + '</i>707</cite> </div>'
				+ '<div class="layim-chat-text">' + message + '</div>'
				+ '</li>';
		$("#printMsg ul").append(mineMsg);
		new_news();
	}

	function printUserMessage(json) {
		
		var userMsg = '<li>'
				+ '<div class="layim-chat-user"> <img src="'
					+	photoUrl
					+	'"> <cite class="layim-chat-user-cite">'
				+ json.userName + '<i>' + format(getNowFormatDate())
				+ '</i> </cite> </div>' + '<div class="layim-chat-user-text">'
				+ json.content + '</div></li>';
		$("#printMsg ul").append(userMsg);
		new_news();
	}
	/* 切换用户 */
	function switchUser(id) {
		tousername = id;
		/* $(".chat-body").fadeToggle(1); */
	}
	/* 发送图片 */
	function selectImg(pic) {
		if (!pic.files || !pic.files[0]) {
			return;
		}
		var reader = new FileReader();
		reader.onload = function(evt) {
			var images = evt.target.result;
			console.log(room);
			console.log(seat);
			var res = customerSendImg(images.substr(images.indexOf(',') + 1));
			if (res.res == 0) {
				printUserImage(images);
			}
		};
		reader.readAsDataURL(pic.files[0]);

	}
	function printUserImage(images) {
		var mineMsg = '<li class="layim-chat-mine">'
				+ '<div class="layim-chat-user"> <img src="/layui/images/img/tu2.png">'
				+ '<cite><i>' + getNowFormatDate() + '</i>' + seat
				+ '</cite> </div><div class="layim-chat-text">'
				+ '<img src="'
					+	images  
					+	'"></div>' + '</li>';
		$("#printMsg ul").append(mineMsg);
		new_news();
	}
	/* 查询待接入用户 */
	queryPendingAccess();
	function queryPendingAccess() {
		$
				.ajax({
					type : "POST",
					async : true,
					url : "/js/chatrooms/query_pending_access",
					dataType : "json",
					success : function(data) {
						console.log("持久的待接入的");
						console.log(data);
						var array = data.res;
						if (array.length > 0) {
							for (var i = 0; i < array.length; i++) {
								var result = '<dd class="PFU'+array[i]+'"><a href="#"	onclick="jr(this.id)"	id="PFU'
										+ array[i]
										+ '">'
										+ array[i]
										+ '</a></dd>';
								$("#djr").append(result);
							}
						}
					},
					error : function() {
					},
				});
	}
	/* 展示最近的消息 */
	function new_news() {
		var main_hei = $("#printMsg").height();
		$(".chat-main").scrollTop(main_hei);
		/* setInterval(function(){
			new_news()
		},200) */
	}
</script>
</body>
</html>